<template>
  <Back />
  <div class="box-border p-20px">
    <van-empty v-if="list.finished && list.data.length < 1" :description="$t('common.noData')" />
    <van-list
      v-if="!list.finished || list.data.length > 0"
      v-model:loading="list.loading"
      :finished="list.finished"
      @load="getList"
      :immediate-check="false"
    >
      <div class="msg" v-for="item in list.data" :key="item.id">
        <p>{{ item.createTime }}</p>
        <div>{{ item.content }}</div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
const { getList, list } = useList(apis.api.userAssetMsgs)

onMounted(async () => {
  list.loading = true
  getList()
})
</script>

<style lang="scss" scoped>
.msg {
  margin-top: 10px;
  border-radius: 1rem 1rem 1rem 0.2rem;
  color: #333333;
  font-size: 1.2rem;
  background-color: #f6f6f6;
  padding: 6px 10px;
  p {
    margin: 0 0 4px 0;
    color: #999999;
    font-size: 1rem;
  }
}
</style>
